<template>
  <div>
    <van-nav-bar title="账号登录" @click-left="onClickLeft" left-arrow />
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" placeholder="请输入账号" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
      <p class="registe"></p>
      <router-link to="/registe" class="registe"> 还没有账号，去注册~</router-link>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      username: 'hzhmqd',
      password: '123456'
    }
  },
  methods: {
    ...mapMutations(['SET_TOKEN']),
    async onSubmit() {
      const { data: res } = await loginAPI(this.username, this.password)
      if (res.status !== 200) return this.$toast.fail(res.description)
      this.$toast.success(res.description)
      //  console.log(res.body)
      this.SET_TOKEN(res.body)
      this.$router.push('/home/profile')
    },
    onClickLeft() {
      this.$router.push({
        path: '/home/profile'
      })
    }
  }
}
</script >

<style lang="less" scoped>
.van-nav-bar {
  background-color: #21b97a;
}

:deep(.van-nav-bar__title) {
  color: #fff;
  font-size: 36px;
}

:deep(.van-icon) {
  color: #fff;
}

.van-button {
  background-color: #21b97a;
}

.registe {
  width: 100%;
  font-size: 32px;
  margin-top: 20px;
  color: #666;
  display: flex;
  justify-content: center;
}

.van-cell {
  margin-top: 20px;
  padding: 40px;
  font-size: 34px;
  border-bottom: 1px solid #f7f7f7;
}

.van-button {
  font-size: 36px;
}
</style>